<template>
  <ul>
    <li>
      <div>商品关键字</div>
      <div class="zy">
        <el-input placeholder="请输入关键字" v-model="box.input"></el-input>
      </div>
      <div><el-button type="primary" @click="searchName">搜索</el-button></div>
    </li>
    <li>
      <div>商品名称</div>
      <div class="block zy">
        <el-cascader
                v-model="value"
                :options="options"
                @change="handleChange"></el-cascader>
      </div>
    </li>
    <li>
      <div>起始日期</div>
      <div class="block zy">
        <el-date-picker
            v-model="box.date"
            type="datetime"
            placeholder="选择日期时间">
        </el-date-picker>
      </div></li>
    <li>
      <div>结束时间</div>
      <div class="block zy">
        <el-date-picker
                v-model="box.day"
                type="datetime"
                placeholder="选择日期时间">
        </el-date-picker>
      </div>
    </li>
    <li>
      <div>助力人数</div>
      <div class="zy"><el-input v-model="box.people" placeholder="请输入内容"></el-input></div>
    </li>
    <li>
      <div>助力库存</div>
      <div class="zy"><el-input v-model="box.stock" placeholder="请输入内容"></el-input></div>
    </li>
    <li><el-button type="primary" @click="addShop">确定</el-button></li>
  </ul>
</template>

<script>
export default {
  name: "addHelp",
  inject:['reload'],
  data(){
    return{
      box:{
        input:'',
        name:'',
        date:'',
        day:'',
        people:'',
        stock:'',
      },
      value:'',
      options:[],
    }
  },
  methods:{
    searchName(){
      this.$axios.post('/api/goods/getKeyWords?keyWords='+this.box.input).then((res)=>{
        let list=res.data.data;
        console.log(list)
        list.forEach((item)=>{
          this.options.push(item);
        });
        this.options.forEach((item)=>{
          item.value=item.goodsId;
          item.label=item.goodsName;
          if(item.goodsFormatList){
            item.children=item.goodsFormatList
            item.children.forEach((tem)=>{
              tem.value=tem.goodsFormatId;
              tem.label=tem.goodsFormatName;
            })
          }
        });
        console.log(this.options);
      })
    },
    handleChange(value) {
      console.log(value);
    },
    addShop(){
      this.options.forEach((item)=>{
        if(item.goodsId==this.value[0]){
          this.box.name=item.goodsName;
        }
      })
      this.box.date=this.box.date.getFullYear() + '-' + (this.box.date.getMonth() + 1) + '-' + this.box.date.getDate() + ' ' + this.box.date.getHours() + ':' + this.box.date.getMinutes() + ':' + this.box.date.getSeconds();
      this.box.day=this.box.day.getFullYear() + '-' + (this.box.day.getMonth() + 1) + '-' + this.box.day.getDate() + ' ' + this.box.day.getHours() + ':' + this.box.day.getMinutes() + ':' + this.box.day.getSeconds();
      this.$axios.post('/api/help/addHelp',{helpStartTime:this.box.date,helpEndTime:this.box.day,goodsId:this.value[0],helpNum:this.box.people,helpStock:this.box.stock,goodsName:this.box.name}).then((res)=>{
        console.log(res.data)
        if(res.data.code==200){
          this.$message({
            message: res.data.msg,
            type: 'success'
          });
        }else if(res.data.code==1001){
          this.$message.error(res.data.msg);
        }
        for (let boxKey in this.box) {
          boxKey='';
        }
        this.value='';
        this.options=[];
        this.reload();
      })
    }
  }
}
</script>

<style scoped>
ul li{
  list-style-type: none;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 100px;
}
.zy{
  margin-left: 20px;
}
ul>li:nth-child(8)>div:last-child{
  width: 300px;
}
</style>